<template>
	<view class="page content">
		<unitv-page v-if="data" id="indexPage" :show="true" ref="unitvPage">
			<unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone2" :values="data" :column="data.length">
				<unitv-scroll>
					<unitv-item v-for="(a, i) in data" :item="i" :key="i" class="item" @hover="hoverItem">
						{{ a.name }}
					</unitv-item>
				</unitv-scroll>
			</unitv-zone>

			<unitv-zone id="zone2" class="zone2" up="zone1" down="zone3" v-if="zone2" :values="zone2"
				:column="zone2.length">
				<unitv-item v-for="(a, i) in zone2" :item="i" :key="i" class="item" @click="clickItem(a.cid)">
					<unitv-image style="width: 100%;height: 100%;" :src="a.img"></unitv-image>
					<view class="text-bg">
						<text class="tip">{{ a.tip }}</text>
					</view>
				</unitv-item>
			</unitv-zone>

			<unitv-zone id="zone3" class="zone3" up="zone2" down="zone4" :values="zone3" :column="zone3.length">
				<unitv-item v-for="(a, i) in zone3" :item="i" :key="i" class="item" @click="clickItem(a.cid)">
					<unitv-image style="width: 100%;height: 100%;" v-if="a" :src="a.img"></unitv-image>
					<view class="text-bg" v-if="a">
						<text class="tip">{{ a.tip }}</text>
					</view>
				</unitv-item>
			</unitv-zone>

			<view class="title">{{ data[index].title1 }}</view>
			<unitv-zone id="zone4" class="zone4" up="zone3" down="zone5" :values="zone4" :column="zone4.length">
				<unitv-scroll>
					<unitv-item v-for="(a, i) in zone4" :item="i" :key="i" class="item" @click="clickItem(a.cid)">
						<unitv-image class="small-img" :src="a.img"></unitv-image>
						<view class="text-bg">
							<text class="tip">{{ a.tip }}</text>
						</view>
					</unitv-item>
					<view style="display: inline-block;width: 20rpx;">
					</view>
				</unitv-scroll>
			</unitv-zone>

			<view class="title">{{ data[index].title2 }}</view>
			<unitv-zone id="zone5" class="zone5" up="zone4" :values="zone5" :column="6" @scrolltolower="loadMore">
				<unitv-item v-for="(a, i) in zone5" :item="i" :key="i" class="item" @click="clickItem(a.cid)">
					<unitv-image style="width: 100%;height: 100%;" :src="a.img"></unitv-image>
					<view class="text-bg">
						<text class="tip">{{ a.tip }}</text>
					</view>
				</unitv-item>
			</unitv-zone>
		</unitv-page>
	</view>
</template>

<script>
	import {
		getIndexData,
	} from '@/api/app.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				index: 0,
				data: null,
			}
		},
		computed: {},
		onShow() {
			if (this.$refs.unitvPage) {
				this.$refs.unitvPage.showPage()
			}
		},
		onLoad() {
			// 请求获取首页json数据
			getIndexData()
				.then(res => {
					console.log("res", res)
					if (res.code) {
						this.data = res.data
					}
				})
				.catch(err => {
					console.log('获取用户列表 get fail----');
					console.log(err);
				});
		},
		onReady() {
			this.track()

			var arr = [];
			for (var i = 0; i < 66; i++) {
				arr.push({
					"img": "",
					"tip": "公司名称"
				});
			}
			this.item5 = arr;

			// 发送日志消息
		},
		onBackPress() {
			let _self = this
			uni.showModal({
				title: '提示',
				content: '是否退出',
				confirmText: "确定",
				cancelText: "取消",
				success: function(res) {
					if (res.confirm) {
						_self.close()
						plus.runtime.quit();
					}
				}
			});
			return true
		},
		computed: {
			zone2() {
				return [this.data[this.index]["c1"][0], this.data[this.index]["c1"][1]]
			},
			zone3() {
				return [this.data[this.index]["c1"][2], this.data[this.index]["c1"][3], this.data[this.index]["c1"][4],
					this.data[this.index]["c1"][5]
				]
			},
			zone4() {
				return this.data[this.index]["c2"]
			},
			zone5() {
				return this.data[this.index]["c3"]
			}
		},
		methods: {
			...mapMutations(['showPage']),
			hoverItem(e) {
				this.index = e
			},
			clickItem(e) {
				uni.navigateTo({
					url: "./main?cid=" + e
				})
			},
			loadMore() {
				// var arr = [];
				// for (var i = 0; i < 66; i++) {
				// 	arr.push({
				// 		"img": "",
				// 		"tip": "公司名称"
				// 	});
				// }
				// this.item5 = this.item5.concat(arr);
				// uni.showToast({
				// 	title: '成功加载更多',
				// 	icon: 'none',
				// 	duration: 2000
				// });
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #120856;

		.bg {
			position: fixed;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

	}

	.title {
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.swiper {
		height: 100%;
	}

	.item {
		// background: #d6d6d6;
		// margin: 0px 10rpx;
		text-align: center;
		display: inline-block;
	}

	.zone1 {
		height: 50rpx;
		display: flex;
		white-space: nowrap;
		align-items: center;
		margin: 0 20rpx;

		.item {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
		}

		.item-active {
			zoom: 0;
			color: #ffffa4;
			border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0);
		}

		.item-hover {
			zoom: 0;
			color: #ffff00;
			border-bottom: 2rpx solid #ffff00;
		}
	}

	.zone2 {
		margin: 5rpx 20rpx;
		height: 160rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;

		.item {
			width: 350rpx;
			height: 150rpx;
			position: relative;

			.text-bg {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 165rpx;
				height: 141rpx;
				padding: 5rpx;
				background-color: rgba($color: #000000, $alpha: 0.5);
				display: none;

				.tip {
					color: #ffffff;
					font-size: 12rpx;
					text-align: left;
				}
			}
		}
	}

	.zone3 {
		margin: 5rpx 20rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.item {
			width: 170rpx;
			height: 110rpx;

			.text-bg {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 161rpx;
				padding: 5rpx;
				background-color: rgba($color: #000000, $alpha: 0.5);
				display: none;

				.tip {
					color: #ffffff;
					font-size: 9rpx;
					text-align: left;
					word-break: break-all;
				}
			}
		}
	}

	.zone4 {
		margin: 5rpx 15rpx;
		width: 710rpx;
		height: 110rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		&::-webkit-scrollbar {
			width: 0;
		}

		.item {
			width: 150rpx;
			height: 100rpx;
			display: inline-block;
			position: relative;

			.small-img {
				width: 140rpx;
				height: 90rpx;
				margin-top: 5rpx;
				margin-left: 5rpx;
			}

			.text-bg {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 20rpx;
				background-color: rgba($color: #000000, $alpha: 0.5);
				display: none;
				align-items: center;
				justify-content: center;

				.tip {
					color: #ffffff;
					font-size: 9rpx;
					text-align: center;
				}
			}
		}

		.item-hover {
			.small-img {
				transition: all 0.3s ease-out;
				transform: scale(1.07);
				box-shadow: 0 0 3px 2px #999;
				animation: glow 1500ms ease-out infinite alternate;
				-webkit-transform: scale(1.07);
				-webkit-box-shadow: 0 0 3px 2px #999;
				-webkit-animation: glow 1500ms ease-out infinite alternate;
			}
		}
	}

	.zone5 {
		margin: 5rpx 20rpx;
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.item {
			width: 110rpx;
			height: 110rpx;
			margin: 5rpx 0;

			.text-bg {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 20rpx;
				background-color: rgba($color: #000000, $alpha: 0.5);
				display: none;
				align-items: center;
				justify-content: center;

				.tip {
					color: #ffffff;
					font-size: 9rpx;
					text-align: center;
				}
			}
		}

		.item-hover {
			zoom: 0;
			background: #ff007f
		}
	}

	.zone2,
	.zone3,
	.zone5 {
		.item-hover {
			transition: all 0.3s ease-out;
			transform: scale(1.04);
			box-shadow: 0 0 3px 2px #999;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			background: #585dfa;
			// zoom: 1.05;
		}
	}

	.zone2,
	.zone3,
	.zone4,
	.zone5 {
		.item-hover {
			.text-bg {
				display: flex;
				animation: fadeIn 1s;
			}

			@keyframes fadeIn {
				0% {
					opacity: 0
				}

				100% {
					opacity: 1
				}
			}
		}
	}
</style>
